<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="头像" width="180">
      <template #default="{ row }">
        <el-image style="width: 80px; height: 80px;" :src="row.avator"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column prop="password" label="密码" width="180" />
    <el-table-column prop="nickname" label="昵称" width="180" />
    <el-table-column prop="role" label="用户权限" width="180" />
    <el-table-column prop="rolename" label="角色" width="180" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="emits('edit', row)">编辑</el-button>
        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No"
          title="确定删除嘛?" @confirm="emits('delete', row)" >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div style="margin: 20px; display: flex; flex-direction: row-reverse;">
    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 接受传递过来的数据
const props = defineProps(['tableData', 'currentPage', 'pageSize', 'total'])
// 传递事件
const emits = defineEmits(['currentChange', 'sizeChange', 'edit', 'delete'])
// 切换一页得数据
function handleSizeChange(size) {
  emits('sizeChange', size)
}
// 切换当前页
function handleCurrentChange(current) {
  emits('currentChange', current)
}
</script>
<style scoped></style>
